// 定义一个名为 ReaderForm 的对象，用作 Vue 组件
const ReaderForm = {
    // 组件名称
    name: 'ReaderForm',
    // 组件模板
    template: `  
    <div v-if="visible" class="modal">  
      <div class="modal-overlay" @click="close"></div>  
      <div class="modal-content">  
        <header class="modal-header">  
          <h2>{{ formData.id ? '编辑读者' : '添加读者' }}</h2>  
          <button class="close-button"  @click="close">×</button> <!-- 右侧 -->
        </header>  
        <form @submit.prevent="submitForm">  
          <input type="hidden" v-model="formData.id">  
 
          <!-- 表单输入字段 -->
          <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" id="name" v-model="formData.name" required>
          </div>
          <div class="form-group">
            <label for="gender">性别:</label>
            <input type="text" id="gender" v-model="formData.gender" required>
          </div>
          <div class="form-group">
            <label for="phone">联系电话:</label>
            <input type="text" id="phone" v-model="formData.phone" required>
          </div>
          <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="text" id="email" v-model="formData.email" required>
          </div>
          <div class="form-group">
            <label for="address">家庭住址:</label>
            <input type="text" id="address" v-model="formData.address" required>
          </div>
          <div class="form-group">
            <label for="cardNumber">读者证号:</label>
            <input type="text" id="cardNumber" v-model="formData.cardNumber" required>
          </div>
          
          <div class="form-group">
            <label for="remark">备注信息:</label>
            <input type="text" id="remark" v-model="formData.remark">
          </div>
          
          
         <div class="form-group full-width">
              <!-- 图片上传组件，传入fileUrl地址 -->
            <image-upload :fileUrl="formData.avatarUrl" 
             @upload-success="handleCoverUpload"
             @delete-success="handleCoverDelete">
             </image-upload>
          </div>  
          
          <div class="form-group">
            <label for="avatarUrl">头像图片URL:</label>
            <input type="text" id="avatarUrl" v-model="formData.avatarUrl" disabled>
          </div>
          

          


          <div class="form-group submit">  
            <input type="submit" :value="formData.id ? '更新读者' : '添加读者'">  
          </div>  
        </form>  
      </div>  
    </div>  
  `,
    // 局部注册组件
    components: {
        ImageUpload
    },

    // 组件属性
    props: {
        // 控制表单弹窗的显示与隐藏
        visible: {
            type: Boolean,
            default: false
        },
        // 从父组件传入的读者数据
        readerData: {
            type: Object,
            default: () => ({})
        }
    },
    // 自定义事件
    emits: ['update:visible', 'submit'],
    // 组件设置函数
    setup(props, { emit }) {
        // 表单数据的初始值
        const initialValue = {
            name: '',
            gender: '',
            phone: '',
            email: '',
            address: '',
            cardNumber: '',
            avatarUrl: '',
            remark: ''
        }

        // 图片上传成功回调
        const handleCoverUpload = (uploadFile) => {
            console.log("图片上传完成");
            // 将上传成功的文件 URL 赋值给 formData.avatarUrl
            formData.value.avatarUrl = uploadFile.fileUrl;
        };

        // 图片删除成功回调
        const handleCoverDelete = () => {
            // 将文件 URL 赋值给 formData.avatarUrl
            formData.value.avatarUrl = '';
        };

        // 使用 Vue.ref 创建响应式表单数据对象
        const formData = Vue.ref({})

        // 提交表单
        const submitForm = () => {
            emit('submit', {...formData.value });
            // close();
        };

        // 关闭弹框
        const close = () => {
            emit('update:visible', false);
        };

        // 监听 readerData 的变化，同步更新表单数据
        Vue.watch(() => props.readerData, (newReaderData) => {
            formData.value = newReaderData ? {...newReaderData } : {...initialValue };
        }, { immediate: true });

        // 返回表单数据及方法
        return {
            formData,
            handleCoverUpload,
            handleCoverDelete,
            submitForm,
            close
        };
    }
};